<template>
  <div class="min-h-screen bg-gray-100 pb-20">
    <!-- 页面标题 -->
    <header class="fixed top-0 left-0 w-full h-14 bg-blue-600 flex items-center z-50 px-4 shadow-md">
      <h2 class="text-white font-bold text-lg">发现</h2>
    </header>

    <!-- 内容区域 -->
    <div class="pt-16 px-4 container mx-auto max-w-screen-sm">
      <div v-if="discoverItems.length > 0">
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
          <div
              v-for="(item, index) in discoverItems"
              :key="index"
              class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transform transition duration-300 hover:-translate-y-1"
          >
            <img
                :src="item.image"
                alt="发现项图片"
                class="w-full h-40 object-cover rounded-lg mb-3 transition-opacity duration-500 ease-in-out opacity-0"
                @load="(e) => e.target.classList.remove('opacity-0')"
            />
            <h3 class="text-base font-semibold">{{ item.title }}</h3>
            <p class="text-sm text-gray-600 mt-1">{{ item.description }}</p>
          </div>
        </div>
      </div>

      <div v-else class="text-center text-gray-500 mt-10">
        <p>暂无推荐内容</p>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <FooterMenu />
  </div>
</template>

<script setup lang="ts">
import FooterMenu from '@/components/common/FooterMenu.vue'

// 模拟发现页数据
const discoverItems = [
  {
    title: '美食推荐',
    description: '探索各地特色美食',
    image: '/img/dcfl01.png'
  },
  {
    title: '新品上市',
    description: '新鲜出炉的商品等你来尝',
    image: '/img/dcfl02.png'
  },
  // 可以根据需要添加更多发现项
]
</script>



